<template>
  <view class="key-container" @click="closeChage" v-show="showMask">
    <uni-transition
      :modeClass="['slide-bottom']"
      :show="show"
      :styles="{ height: '100vh' }"
      :duration="duration"
    >
      <view class="key-content" @click.stop>
        <slot></slot>
        <view class="key-box block flex">
          <view class="key-left">
            <view class="key-top flex flex-wrap">
              <view
                class="btn-box"
                v-for="(item, index) in numArr"
                :key="index"
              >
                <button
                  hover-class="active"
                  class="cu-btn key-btn text-black text-xl"
                  @click.stop="keydown(item)"
                >
                  {{ item }}
                </button>
              </view>
            </view>
            <view class="key-bottom">
              <view class="btn-zero">
                <button
                  hover-class="active"
                  class="cu-btn key-btn text-black text-xl"
                  @click.stop="keydown('0')"
                >
                  0
                </button>
              </view>
              <view class="btn-point">
                <button
                  hover-class="active"
                  class="cu-btn key-btn text-black text-xl"
                  @click.stop="keydown('.')"
                >
                  .
                </button>
              </view>
            </view>
          </view>
          <view class="key-right">
            <view class="del">
              <button
                hover-class="active"
                class="cu-btn key-btn text-black text-xl"
                @click.stop="del"
              >
                <text class="zm iconbackspace text-xl"></text>
              </button>
            </view>
            <view class="confirm">
              <button
                hover-class="active"
                :style="[confirmStyle]"
                class="cu-btn"
                @click.stop="confirm"
              >
                <text class="confirm-text">{{ confirmText }}</text>
              </button>
            </view>
          </view>
        </view>
      </view>
    </uni-transition>
  </view>
</template>

<script>
/**
 * 付款组件
 * @property {Number} duration - 弹出动画时长，默认为300
 * @event {Function} input - 数字改变触发，参数为数字
 * @event {Function} confirm - 付款时触发，参数为数字
 * @event {Function} hide - 关闭键盘触发，参数为空
 */

import uniTransition from "./animation.vue";
export default {
  components: {
    uniTransition,
  },
  props: {
    value: {
      type: String, //传入的值 vue2
      default: "",
    },
    modelValue: {
      type: String, //传入的值 vue3
      default: "",
    },
    duration: {
      type: Number, //弹出动画时常
      default: 300,
    },

    max: {
      type: Number, //最大交易金额
      default: 100000,
    },
    confirmText: {
      type: String, //确认按钮的文本
      default: "确认",
    },
    overlayClose: {
      type: Boolean, //是否在点击遮罩层后关闭
      default: true,
    },
    confirmStyle: {
      type: Object, //确认按钮的样式
      default: () => {
        return {
          backgroundColor: "#F3498B ",
        };
      },
    },
  },
  // 兼容vue3需声明emits注册事件
  emits: ["hide", "confirm", "input", "update:modelValue"],
  data() {
    return {
      show: false, //显示键盘
      showMask: false, //遮罩层
      numArr: ["1", "2", "3", "4", "5", "6", "7", "8", "9"], //键盘
    };
  },

  computed: {
    // v-model的实现
    content: {
      // （vue2:接收value vue3接收modelValue）
      get: function (el) {
        return this.value || this.modelValue;
      },
      // （vue2派发input vue3派发update:modelValue）
      set: function (val) {
        this.$emit("input", val);
        this.$emit("update:modelValue", val);
      },
    },
  },
  methods: {
    // 关闭
    close() {
      this.show = false;
      setTimeout(() => {
        this.showMask = false;
      }, this.duration);
    },
    // 打开
    open() {
      this.show = true;
      this.showMask = true;
    },
    // 删除
    del() {
      if (this.content.length) {
        this.content = this.content.slice(0, this.content.length - 1);
      }
    },
    // 输入
    keydown(e) {
      let strLen = this.content.length;
      // 最大支付金额的限制
      if (this.content >= this.max) {
        wx.showToast({
          title: `支付金额不能大于${this.max}`,
          icon: "none",
          duration: 1500,
        });
        return;
      }
      switch (e) {
        // 如果第一位是.做补零
        case ".":
          if (this.content.indexOf(".") === -1) {
            this.content.length < 1
              ? (this.content = "0.")
              : (this.content += ".");
          }
          break;

        default:
          //输入的为0直接展示
          if (this.content === "0" && e !== ".") {
            this.content = e;
          } else {
            let spotIndex = this.content.indexOf("."); //小数点的位置
            // 截取掉第一个0
            if (this.content[0] === "0" && this.content[1] !== ".") {
              this.content = this.content.substr(1);
            }
            //小数点后只保留两位
            if (spotIndex === -1 || this.content.length - spotIndex !== 3) {
              this.content += e;
            }
          }
          break;
      }
    },
    // 遮罩层 关闭
    closeChage() {
      if (this.overlayClose) {
        this.$emit("hide");
        this.close();
      }
    },
    // 确认按钮
    confirm() {
      this.$emit("confirm", this.content);
      this.closeChage();
    },
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "zm"; /* project id 2442084 */
  src: url("https://at.alicdn.com/t/font_2442084_o72ps3802ih.eot");
  src: url("https://at.alicdn.com/t/font_2442084_o72ps3802ih.eot?#iefix")
      format("embedded-opentype"),
    url("https://at.alicdn.com/t/font_2442084_o72ps3802ih.woff2")
      format("woff2"),
    url("https://at.alicdn.com/t/font_2442084_o72ps3802ih.woff") format("woff"),
    url("https://at.alicdn.com/t/font_2442084_o72ps3802ih.ttf")
      format("truetype"),
    url("https://at.alicdn.com/t/font_2442084_o72ps3802ih.svg#zm") format("svg");
}

.zm {
  font-family: "zm" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconbackspace:before {
  content: "\ef11";
}

.flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.cu-btn {
  position: relative;
  border: 0rpx;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 30rpx;
  font-size: 28rpx;
  height: 64rpx;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  overflow: visible;
  margin-left: initial;
  transform: translate(0rpx, 0rpx);
  margin-right: initial;
}

.cu-btn::after {
  display: none;
}
.text-xl {
  font-size: 36rpx;
  font-weight: bold;
  font-family: "microsoft-yahei";
}
.text-black {
  color: #333;
}
.active {
  background-color: #ddd !important;
  transform: translate(2rpx, 2rpx);
}
.key-container {
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  .key-content {
    position: absolute;
    bottom: 0;
    width: 100vw;
    background-color: #f7f7f7;
  }
}
.key-box {
  width: 100%;
  box-sizing: border-box;
  padding: 10rpx 10rpx 0;
  .key-left {
    width: 75%;
  }
  .key-right {
    width: 25%;
    display: flex;
    flex-direction: column;
  }
  .key-bottom {
    width: 100%;
    display: flex;
  }
}
.del {
  width: 100%;
}
.btn-box {
  width: 33.33%;
  padding: 0 10rpx 10rpx 0;
  box-sizing: border-box;
}
.btn-zero {
  width: 66.66%;
  padding: 0 10rpx 10rpx 0;
  box-sizing: border-box;
}
.btn-point {
  width: 33.33%;
  padding: 0 10rpx 10rpx 0;
  box-sizing: border-box;
}
.key-right {
  flex-shrink: 0;
}
.key-btn {
  background-color: #fff;
  width: 100%;
  height: 90rpx;
}

.confirm {
  width: 100%;
  flex: 1;
  padding: 10rpx 0 10rpx 0;
  box-sizing: border-box;
  button {
    width: 100%;
    height: 100%;
    .confirm-text {
      color: #fff;
      display: block;
      font-size: 32rpx;
    }
  }
}
</style>
